<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
		<style type="text/css">
			#banner {
				background-image: url(img/banner.jpg);
			}
			
			.container {
				background: ivory;
				height: 662px;
			}
			
			#logo {
				margin-left: 10%;
				width: 8%;
				height: 8%;
			}
			
			#siteName {
				margin-top: 60%;
				margin-left: 3%;
				font-family: "楷体";
				font-size: 30px;
			}
			
			.tab-pane {
				margin: 7%;
			}
			
			#subtitle {
				margin-top: -3%;
				margin-left: 22%;
				color: white;
				font-family: "楷体";
			}
			
			#pic {
				margin-top: 3%;
			}
			
			#usernameDuplicated {
				color: red;
				display: none;
			}
			
			#usernameIllegal {
				color: red;
				display: none;
			}
			
			#emailMsg {
				color: red;
				display: none;
			}
			
			#teleMag {
				color: red;
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="container" style="margin:0;width:100%">
			<div class="row clearfix" id="banner">
				<div class="col-md-8 column">
					<img src="img/t14.png" id="logo" />
					<nobr id="siteName" style="color: steelblue;">寻一路知己</nobr>
					<p id="subtitle">公共汽车管理系统</p>
				</div>
				<div class="col-md-4 column">
					<ul class="breadcrumb">
						<li>
							<a href="${pageContext.request.contextPath}/wzq/register.jsp">注册</a>
						</li>
						<li>
							<a href="${pageContext.request.contextPath}/mmy/T_user.jsp">登录</a>
						</li>
						<li>
							<a href="#">帮助中心</a>
						</li>
						<li>
							<a href="WebContent/index.html">退出登录</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="row clearfix">
				<div class="col-md-4 column">
				</div>
				<div class="col-md-4 column">
					<form role="form" action="${pageContext.request.contextPath}/user_registry.action" method="post">
						<div class="form-group">
							<label for="exampleInputEmail1">用户名</label>
							<input type="text" class="form-control" name="name" id="username" />
							<nobr id="usernameDuplicated">用户名已经存在,请重新输入</nobr>
							<nobr id="usernameIllegal">用户名至少6位,且 第一位不能为数字</nobr>
						</div>
						<div class="form-group">
							<label for="exampleInputPassword1">密码</label><input type="password" class="form-control" name="password" />
						</div>
						<div class="form-group">
							<label for="exampleInputPassword1">角色</label><input type="text" class="form-control" name="role" />
						</div>
						
						<div class="form-group">
							<label for="exampleInputPassword1">安全问题</label><br />
							<select name="question" id="passwordR" class="form-control">
								<option>请选择密码提示问题</option>
								<option>你父亲的职业</option>
								<option>你父亲的姓名</option>
								<option>你学号(工号)</option>
								<option>你母亲的生日</option>
								<option>小学班主任名字</option>
								<option>你配偶的姓名</option>
								<option>你配偶的职业</option>
							</select>
						</div>
						<div class="form-group">
							<label for="exampleInputPassword1">问题答案</label><input type="text" class="form-control" name="answer" />
						</div>
						<div class="form-group">
							<label for="exampleInputPassword1">验证码</label>
							<input type="text" class="form-control" id="valiCode" name="valiCode"/>
							<img alt="验证码" src="${pageContext.request.contextPath}/valiCodeAction.action" id="img1"> &nbsp;&nbsp;
							<a href="javascript:;" id="a1">看不清换一张</a>
						</div>
						<br />
						<button type="submit" class="btn btn-default" id="subBtn1">提交</button>
						<button type="reset" class="btn btn-default">重置</button>
					</form>
				</div>
				<div class="col-md-4 column">
				</div>
			</div>
		</div>

		<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script type="text/javascript">
			/* $(function() {
				var flag1 = true;
				var flag2 = true;
				var flag3 = true;
				var flag4 = true;
				$("#username").blur(function() {
					var username = document.getElementById("username").value;
					var reg = /^[\D][a-zA-Z0-9]{5,20}$/;
					if(!reg.test(username)) {
						$("#usernameIllegal").css("display", "block");
						flag1 = false;
					}
					if(reg.test(username)) {
						$("#usernameIllegal").css("display", "none");
						flag1 = true;
					}
					$.ajax({
						type: "get",
						url: "http://localhost:8080/busproject/validation.user",
						async: true,
						dataType: "jsonp",
						jsonp: "callback",
						success: function(data) {
							for(i in data) {
								if(data[i].username == username) {
									$("#usernameDuplicated").css("display", "block");
								}
							}
						}
					});
				});
				$("#email").blur(function() {
					var email = document.getElementById("email").value;
					var reg = /\w+[@]{1}\w+[.]\w+/;
					if(!reg.test(email)) {
						$("#emailMsg").css("display", "block");
						flag3 = false;
					}
					if(reg.test(email)) {
						$("#emailMsg").css("display", "none");
						flag3 = true;
					}
				});
				$("#tel").blur(function() {
					var telephone = document.getElementById("tel").value;
					var reg = /^((0\d{2,3}-\d{7,8})|(1[3,4,5,7,8]\d{9}))$/;
					if(!reg.test(telephone)) {
						$("#teleMag").css("display", "block");
						flag = false;
					}
					if(reg.test(telephone)) {
						$("#teleMag").css("display", "none");
						flag = true;
					}
				});
			}) */
			$(function(){
				$("#a1").click(function(){
					var img = document.getElementById("img1");
					img.src = 'code?' + Math.random();
				})
			});
		</script>
	</body>

</html>